import { _decorator, Component, EventTouch, Node, NodeEventType, tween, Tween, UITransform, Vec3 } from 'cc';
import { PageBase } from './core/page/PageBase';
import { PageController } from './core/page/PageController';
import { MainPages } from './pageSample/MainPages';
const { ccclass, property } = _decorator;

@ccclass('BottomMenu')
export class BottomMenu extends Component {

    private _tabs: Node[] = [];
    private _lines: Node[] = [];
    private _colorBar: Node;

    @property({ type: Node, visible: true })
    pageNode: Node = null;

    start() {
        this._colorBar = this.node.getChildByName('colorBar');
        //
        this._tabs.push(this.node.getChildByName('btnMenu1'));
        this._tabs.push(this.node.getChildByName('btnMenu2'));
        this._tabs.push(this.node.getChildByName('btnMenu3'));
        this._tabs.push(this.node.getChildByName('btnMenu4'));
        this._tabs.push(this.node.getChildByName('btnMenu5'));
        //
        this._lines.push(this.node.getChildByName('line1'));
        this._lines.push(this.node.getChildByName('line2'));
        this._lines.push(this.node.getChildByName('line3'));
        this._lines.push(this.node.getChildByName('line4'));
        //
        let c: number = this._tabs.length;
        for (let i: number = 0; i < c; i++) {
            this._tabs[i].on(NodeEventType.TOUCH_START, this.onTabChange, this);
        }
        //
        this.showPage(0, false);
    }

    private onTabChange(e: EventTouch): void {
        let idx: number = this._tabs.indexOf(e.currentTarget);
        if (idx >= 0) {
            this.showPage(idx, true);
        }
    }

    private _currentIdx: number = -1;

    private showPage(idx: number, animation: boolean): void {
        if (idx != this._currentIdx) {
            this._currentIdx = idx;
            //
            let pageController: PageController = this.pageNode.getComponent(MainPages).pageController;
            pageController.showPage(idx, null,
                (oldPage: PageBase, newPage: PageBase, onComplete: () => void, cbThis: any) => {
                    Tween.stopAllByTarget(newPage.node);
                    if (oldPage) {
                        Tween.stopAllByTarget(oldPage.node);
                        // 设置新页面起点坐标
                        newPage.node.setPosition(new Vec3(oldPage.pageIdx > newPage.pageIdx ? -750 : 750, 0, 0));
                        tween(newPage.node.position).to(0.2, new Vec3(0, 0, 0),
                            {
                                easing: "smooth",
                                onUpdate: (target: Vec3, ratio: number) => {
                                    newPage.node.position = target;
                                }
                            }
                        ).start();

                        // 设置旧页面目标点坐标
                        let oldPos: Vec3 = oldPage.node.getPosition(new Vec3(0, 0, 0));
                        oldPos.x = oldPage.pageIdx > newPage.pageIdx ? 750 : -750;// move left <--- right
                        tween(oldPage.node.position).to(0.2, oldPos,
                            {
                                easing: "smooth",
                                onUpdate: (target: Vec3, ratio: number) => {
                                    oldPage.node.position = target;
                                }
                            }
                        ).call(() => {
                            onComplete.call(cbThis);
                        }).start();
                    } else {
                        let newPos: Vec3 = newPage.node.getPosition(new Vec3(0, 0, 0));
                        newPos.x = 0;
                        newPage.node.setPosition(newPos);
                        onComplete.call(cbThis);
                    }
                },
                this);
            this.sortTabs(animation);
        }
    }

    //
    private sortTabs(animation: boolean): void {
        //
        let tabCount: number = this._tabs.length;
        let width = this.node.getComponent(UITransform).width;
        // 当前选中按钮的占用宽度
        let widthSelected: number = this._colorBar.getComponent(UITransform).width;
        let widthOthers: number = (width - widthSelected) / (tabCount - 1);
        //
        let bgXPosition: number = 0;
        let startTabX: number = 0;
        let xPos: number[] = [];
        for (let i: number = 0; i < tabCount; i++) {
            Tween.stopAllByTarget(this._tabs[i]);
            //
            let position: Vec3 = this._tabs[i].getPosition();
            if (i == this._currentIdx) {
                bgXPosition = startTabX;
                position.x = (startTabX + widthSelected / 2);
                position.y = 80;
                this._tabs[i].setScale(1.2, 1.2, 1);
                startTabX += widthSelected;
            } else {
                position.x = (startTabX + widthOthers / 2);
                position.y = 56;
                this._tabs[i].setScale(0.8, 0.8, 1);
                startTabX += widthOthers;
            }
            if (animation) {
                tween(this._tabs[i].position).to(0.1, position, {
                    easing: "smooth",
                    onUpdate: (target: Vec3, ratio: number) => {
                        this._tabs[i].position = target;
                    }
                }).start();
            } else {
                this._tabs[i].setPosition(position);
            }
            xPos.push(startTabX);
        }
        Tween.stopAllByTarget(this._colorBar);
        let bgPosition: Vec3 = this._colorBar.getPosition();
        if (animation) {
            let position = new Vec3(bgXPosition, bgPosition.y, bgPosition.z);
            tween(this._colorBar.position).to(0.2, position,
                {
                    easing: "smooth",
                    onUpdate: (target: Vec3, ratio: number) => {
                        this._colorBar.position = target;
                    }
                }
            ).start();
        } else {
            this._colorBar.setPosition(new Vec3(bgXPosition, bgPosition.y, bgPosition.z));
        }
        //
        this.sortLines(xPos, animation);
    }

    private sortLines(xPos: number[], animation: boolean): void {
        // console.log(xPos);
        let lineCount: number = this._lines.length;
        for (let i: number = 0; i < lineCount; i++) {
            Tween.stopAllByTarget(this._lines[i]);
            //
            let position: Vec3 = this._lines[i].getPosition();
            position.x = xPos[i];
            if (animation) {
                tween(this._lines[i].position).to(0.1, position, {
                    easing: "smooth",                                                                // ITweenOption 的接口实现：
                    onUpdate: (target: Vec3, ratio: number) => {                       // onUpdate 接受当前缓动的进度
                        this._lines[i].position = target;                                // 将缓动系统计算出的结果赋予 node 的位置
                    }
                }).start();
            } else {
                this._lines[i].setPosition(position);
            }
        }
    }
}

